<!-- 游戏编辑弹窗 -->
<template>
  <el-dialog
    :title="isUpdate ? '修改充值返利配置' : '添加充值返利配置'"
    :visible="visible"
    width="800px"
    :destroy-on-close="true"
    :lock-scroll="false"
    :before-close="confirmClose"
    @update:visible="updateVisible"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="85px">
      <el-form-item label="选择游戏">
        <PageSelect
          :placeholder="'请选择游戏'"
          v-model="form.game_id"
          :whereName="'name'"
          :url="'/BoxRebate/getGameList'"
          :optionLable="'game_name'"
          :optionvalue="'id'"
          :multiple="false"
        />
      </el-form-item>

      <el-form-item label="选择区服:" prop="open_id">
        <PageSelect
          :placeholder="'请选择区服'"
          v-model="form.open_id"
          :whereName="'name'"
          :url="openUrl"
          :optionLable="'name'"
          :optionvalue="'id'"

        />
      </el-form-item>

      <el-form-item label="发放方式:">
        <el-select
          clearable
          filterable
          v-model="form.send_type"
          placeholder="请选择发放方式"
          class="ele-fluid"
        >
          <el-option
            v-for="(value, key) in openType"
            :key="key"
            :label="value"
            :value="parseInt(key)"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="是否开启:" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">开启</el-radio>
          <el-radio :label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" size="small" @click="addgradientNewItem">返利梯度</el-button>
        <el-table :data="attrTable" border style="width: 100%">
          <el-table-column label="充">
            <template slot-scope="scope">
              <el-input v-model="scope.row.item"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="返">
            <template slot-scope="scope">
              <div style="display: flex">
                <el-input v-model="scope.row.value"></el-input>
                <p style="align-content: center">%</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="100px" label="操作">
            <template slot-scope="scope">
              <i class="el-icon-delete" @click="delgradientAttr(scope.$index)" style="cursor: pointer"></i>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="返利规则:">
        <el-input
          v-model="form.rule"
          placeholder="请输入返利规则"
          :rows="4"
          :maxlength="200"
          type="textarea"/>
      </el-form-item>

      <el-form-item label="返利备注:">
        <el-input
          v-model="form.remark"
          placeholder="请输入返利备注"
          :rows="4"
          :maxlength="200"
          type="textarea"/>
      </el-form-item>

      <el-form-item>
        <el-button @click="confirmClose()">取消</el-button>
        <el-button type="primary" @click="save" :loading="loading">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
    import axios from "axios";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css"
    import PageSelect from "@/components/pageSelect/index.vue";

    export default {
        name: "Edit",
        props: {
            // 弹窗是否打开
            visible: Boolean,
            // 修改回显的数据
            data: Object,
        },
        components: {PageSelect},

        data() {
            return {
                // 表单数据
                form: Object.assign({status: 1}, this.data),
                where: {},
                // 表单验证规则
                rules: {
                    game_id: [
                        {required: true, message: "请选择游戏名称", trigger: "blur"},
                    ]
                },
                attrTable: [],
                // 提交状态
                loading: false,
                // 是否是修改
                isUpdate: false,
                openType: null,
                openUrl: '/BoxRebate/getGameOpenList',
                statusArr: {
                    1: '开启',
                    2: '关闭'
                }
            };
        },
        watch: {
            visible: {
                handler(val) {
                    console.log(val);
                    this.attrTable = [];
                    if (val) {
                        if (this.data) {
                            this.form = Object.assign({}, this.data);
                            if(this.form.game_id){
                                this.openUrl = `/BoxRebate/getGameOpenList?game_id=` + this.form.game_id;
                            }
                            if (this.form.gradient) {
                                this.attrTable = this.data.gradient;
                            }
                            this.isUpdate = true;
                        } else {
                            this.form = {};
                            this.isUpdate = false;
                        }
                    }
                },
                deep: true,
                immediate: true
            },
            "form.game_id"(val) {
                this.openUrl = `/BoxRebate/getGameOpenList?game_id=` + val;
            }
        },
        created() {
            this.getOpenType()
        },
        computed: {},
        methods: {
            save() {
                this.form.gradient = this.attrTable;
                delete this.form.app_id;
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.$http
                            .post("/BoxRebate/edit", this.form)
                            .then((res) => {
                                this.loading = false;
                                if (res.data.code === 0) {
                                    this.$message.success(res.data.msg);
                                    if (!this.isUpdate) {
                                        this.form = {};
                                    }
                                    this.updateVisible(false);
                                    this.$emit("done");
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            })
                            .catch((e) => {
                                this.loading = false;
                                this.$message.error(e.message);
                            });
                    } else {
                        return false;
                    }
                });
            },
            /* 更新visible */
            updateVisible(value) {
                this.$emit("update:visible", value);
            },
            // 删除规格
            delAttr(index) {
                this.attrTable.splice(index, 1);
            },

            // 删除规格
            delgradientAttr(index) {
                this.attrTable.splice(index, 1);
            },

            addgradientNewItem() {
                this.attrTable.push({item: "", value: ""});
            },

            confirmClose() {
                this.$confirm("确定要返回吗？", "温馨提示")
                    .then(() => {
                        this.updateVisible(false);
                        this.initForm();
                    })
                    .catch(() => {
                    });
            },
            //获取充值方式
            getOpenType() {
                axios
                    .post("/BoxRebate/getOpenType", {})
                    .then(res => {
                        if (res.data.code != 0) {
                            console.log("获取数据失败！");
                            return;
                        }
                        this.openType = res.data.data;
                    });
            },
        },
    };
</script>

<style scoped></style>
